<template>
  <div style="font-size: 12px;line-height:60px;display: flex">
    <div style="flex: 1;font-size: 20px">
      <span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span>
      <el-breadcrumb separator="/" style="display: inline-block;margin-left: 10px">
        <el-breadcrumb-item style="font-size: 22px" v-show="DisappearFont">
          <b>学生选课系统</b>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-dropdown style="cursor: pointer">
      <span>{{ roleZh }} : {{ username }}</span>
      <i class="el-icon-arrow-down" style="margin-left: 5px"></i>
      <el-dropdown-menu slot="dropdown" style="width: 100px;text-align: center">
        <el-dropdown-item popper-class="popper-select" style="font-size: 14px;padding: 5px 0">
          <span @click="hChange">修改密码</span>
        </el-dropdown-item>
        <el-dropdown-item popper-class="popper-select" style="font-size: 14px;padding: 5px 0">
          <span @click="logout">退出登录</span>
        </el-dropdown-item>
      </el-dropdown-menu>

    </el-dropdown>
  </div>
</template>
<script>
export default {
  data() {
    return {
      username: localStorage.getItem("username"),
      role: localStorage.getItem("role")
    }
  },
  props: {
    collapseBtnClass: String,
    collapse: Function,
    DisappearFont: Boolean,
  },
  methods: {
    hChange() {
      this.$router.push('/change_password')
    },
    logout() {
      localStorage.removeItem("token");
      localStorage.removeItem("role");
      localStorage.removeItem("userId");
      this.$message.success("退出登录成功！");
      setTimeout(() => this.$router.replace("/login"), 1500);
    }
  },
  computed: {
    roleZh() {
      if (this.role == "admin")
        return "管理员"
      else
        return "学生"
    }
  }
}
</script>
